<template>
  <div class="h-100">
    <div v-if="isMain" class="h-100 position-absolute" style="top:0;z-index:1">
      <div class="h-100">
        <div v-if="false" class="map-type">
          <div class="item-map-type" :class="{ active: index == '0' }" @click="tabType('0')">种植面积</div>
          <div class="item-map-type" :class="{ active: index == '1' }" @click="tabType('1')">受灾成灾</div>
        </div>
        <div v-if="index == '0'" id="plantingMap" style="height: 100%" />
        <div v-if="index == '1'" id="disasterMap" style="height: 100%" />
      </div>
    </div>
    <index-header style="top:0;z-index:2" />
    <div v-if="isMain" style="height:89.8%">
      <div class="h-100 position-relative">
        <div class="gradients-bottom" />
        <div class="gradients-left position-absolute h-100">
          <div class="h-100 flex-column" style="width: 69.5%;height:100%;margin: 0 20px;">
            <div data-bottom style="flex:1">
              <page-header :ph="186" text="经济概况">
                <div class="h-100 flex flex-center">
                  <div class="flex" style="width:94%;flex-direction: column;">
                    <div>
                      <div class="c-f f-14">农业产业GDP</div>
                      <div class="number-box">
                        <span class="t-big-number">{{ populationDivide.gdp }}</span>
                        <span class="f-14 small-number">万元</span>
                      </div>
                    </div>
                    <div class="flex m-t-25 justify-between">
                      <div class="flex justify-between" style="flex-direction: column;">
                        <div>
                          <div class="c-f f-14">主要农产品产量</div>
                          <div class="number-box">
                            <span class="t-big-number">{{ (populationDivide.zyncpcl / 10000) | numFilter }}</span>
                            <span class="small-number">万吨</span>
                          </div>
                        </div>
                        <div class="m-t-25">
                          <div class="c-f f-14">农产品总销量</div>
                          <div class="number-box">
                            <span class="t-big-number">{{ (populationDivide.ncpzxl / 10000) | numFilter }}</span>
                            <span class="small-number">万吨</span>
                          </div>
                        </div>
                      </div>
                      <div class="flex justify-between" style="flex-direction: column;">
                        <div>
                          <div class="c-f f-14">农产品需求量</div>
                          <div class="number-box">
                            <span class="t-big-number">{{ (populationDivide.ncpzxl / 10000) | numFilter }}</span>
                            <span class="small-number">万吨</span>
                          </div>
                        </div>
                        <div>
                          <div class="c-f f-14">人均可支配收入</div>
                          <div class="number-box">
                            <span class="t-big-number">{{ populationDivide.nhzjsr }}</span>
                            <span class="small-number">元</span>
                          </div>
                        </div>
                      </div>
                      <div class="flex justify-between" style="flex-direction: column;">
                        <div>
                          <div class="c-f f-14">货运量</div>
                          <div class="number-box">
                            <span class="t-big-number">{{ (populationDivide.hyl / 10000) | numFilter }}</span>
                            <span class="small-number">万吨</span>
                          </div>
                        </div>
                        <div>
                          <div class="c-f f-14">贷款余额</div>
                          <div class="number-box">
                            <span class="t-big-number">{{ populationDivide.dkze }}</span>
                            <span class="small-number">万元</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </page-header>
            </div>
            <div style="height:20px" />
            <div data-bottom style="flex:1">
              <page-header :ph="186" text="农资概况">
                <v-chart v-if="optionNZGK.isShow" :options="optionNZGK" />
              </page-header>
            </div>
            <div style="height:20px" />
            <div data-bottom style="flex:1">
              <page-header :ph="186" text="农产品供需">
                <!-- <yl-table :table-columns="table_2.columns" :url="table_2.url" /> -->
                <v-chart :options="optionNCPGXSPFX" />
              </page-header>
            </div>
            <div style="height:20px" />
          </div>
        </div>

        <div class="gradients-right position-absolute h-100 flex-end">
          <div class="h-100 flex-column" style="width: 69.5%;margin: 0 20px;">
            <div data-bottom style="flex:1">
              <page-header :ph="268" text="新型经营主体经营情况">
                <v-chart v-if="optionXjyzt.isShow" :options="optionXjyzt" />
              </page-header>
            </div>
            <div style="height:20px" />
            <div data-bottom style="flex:1">
              <page-header :ph="186" text="仓储物流概况">
                <v-chart v-if="optionCcwlgk.isShow" :options="optionCcwlgk" />
              </page-header>
            </div>
            <div style="height:20px" />
            <div data-bottom style="flex:1">
              <page-header :ph="306" text="农业培训">
                <v-chart v-if="optionNypx_1.isShow" :options="optionNypx_1" />
              </page-header>
            </div>
            <div style="height:20px" />
          </div>
        </div>

        <div class="map-legend">
          <div v-for="item in colorList" :key="item.color" class="flex map-legend-item">
            <div class="map-legend-color" :style="{ background: item.color }" />
            <div class="">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <router-view v-else class="h-87" />
  </div>
</template>

<script>
import AMap from '@/utils/AMap'
import IndexHeader from 'header/IndexHeader2.vue'
import {
  getTowSideStat,
  getTowSideBalanceStat,
  queryMergeList,
  getTowSideStatMonth,
  populationDivide,
  disasterArea,
  plantAreaCrops
} from '@/api/connector'
import echarts from 'echarts'
import PageHeader from 'header/PageHeader.vue'
import theme from '@/utils/echarts-theme.json'
import { createInfoWindow } from '@/utils/app'
import { formatNumber } from '@/utils/app'
const tooltip = function(a, b) {
  return {
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    },
    // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
    formatter: function(params, ticket, callback) {
      var htmlStr = ''
      for (var i = 0; i < params.length; i++) {
        var param = params[i]
        var xName = param.name // x轴的名称
        var seriesName = param.seriesName // 图例名称
        var value = param.value // y轴值
        var color = param.color // 图例颜色
        if (i === 0) {
          htmlStr += xName + '<br/>' // x轴的名称
        }
        htmlStr += '<div>'
        htmlStr +=
          '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
        htmlStr += seriesName + '：' + formatNumber(value) + (i > 1 ? a : b) // 圆点后面显示的文本
        htmlStr += '</div>'
      }
      return htmlStr
    }
  }
}
export default {
  name: 'IndustrialEvelopment',
  components: {
    IndexHeader,
    PageHeader
  },
  data() {
    return {
      index: 0,
      map: null,
      mapType: '',
      disasterAreaData: null,
      amap: '',
      infoWindow: null,
      p1: null,
      p2: null,
      heatMap: null,
      path: null,
      businessEntityMap: null,
      disasterPath: null,
      starCenter: [108.19848536074164, 34.241771035259845],
      optionNZGK: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + formatNumber(value) + (i === 2 ? '吨' : '公斤') // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['可用余额', '不可用余额', '收入', '支出']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: [
          {
            name: '公斤',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          },
          {
            name: '吨',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          }
        ],
        series: []
      },
      optionNCPGXSPFX: {
        grid: {
          bottom: '10%'
        },
        tooltip: tooltip('吨', '吨'),
        legend: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: ['2019-08', '2019-09', '2019-10', '2019-11', '2019-12']
        },
        yAxis: {
          name: '吨',
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          }
        },
        series: [
          {
            name: '农产品供应量',
            type: 'line',
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            },

            data: [9, 10, 6, 7, 8]
          }
        ]
      },
      colorList: [
        {
          type: '1',
          name: '农作物总播种面积',
          color: '#2DAFFF'
        },
        {
          type: '2',
          name: '粮食作物播种面积',
          color: '#6141FF'
        },
        {
          type: '3',
          name: '主要农产品播种面积',
          color: '#15F0C0'
        },
        {
          type: '4',
          name: '其他',
          color: '#F3F81A'
        }
      ],
      optionXjyzt: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + formatNumber(value) + (i === 2 ? '吨' : '亿元') // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['可用余额', '不可用余额', '收入', '支出']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: [
          {
            name: '吨',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          },
          {
            name: '亿元',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          }
        ],
        series: []
      },
      optionNypx_1: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + formatNumber(value) + (i === 0 ? '次' : '人') // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['可用余额', '不可用余额', '收入', '支出']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: [
          {
            name: '次',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            max: 750
          },
          {
            name: '人',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          }
        ],
        series: []
      },
      optionNypx_2: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '19%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              width: 2
            }
          },
          data: [],
          position: 'top'
        },
        yAxis: {
          inverse: true,
          name: '人次',
          axisLine: {
            lineStyle: {
              width: 2
            }
          },
          nameTextStyle: {
            align: 'center',
            verticalAlign: 'top'
          },
          splitLine: {
            // 分割线配置
            lineStyle: {
              color: '#AAAAAA56'
            }
          }
        },
        series: []
      },
      optionNcpgx: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['差额', '支出', '收入']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '18%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value'
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        series: [
          {
            name: '利润',
            type: 'bar',
            label: {
              show: true,
              position: 'inside'
            },
            data: [200, 170, 240, 244, 200, 220, 210]
          },
          {
            name: '收入',
            type: 'bar',
            stack: '总量',
            label: {
              show: true
            },
            data: [320, 302, 341, 374, 390, 450, 420]
          },
          {
            name: '支出',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'left'
            },
            data: [-120, -132, -101, -134, -190, -230, -210]
          }
        ]
      },
      optionZyncpjgzs: {
        isShow: false
      },
      populationDivide: {},
      optionCcwlgk: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + formatNumber(value) + '吨' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['可用余额', '不可用余额', '收入', '支出']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: {
          name: '吨',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          splitLine: {
            // 分割线配置
            lineStyle: {
              color: '#AAAAAA56'
            }
          }
        },
        series: []
      }
    }
  },
  computed: {
    isMain() {
      return this.$route.name === 'industrial-evelopment'
    }
  },
  filters: {
    numFilter(value) {
      let realVal = ''
      if (!isNaN(value) && value !== '') {
        // 截取当前数据到小数点后两位
        realVal = parseFloat(value).toFixed(2)
      } else {
        realVal = '--'
      }
      return realVal
    }
  },
  watch: {
    $route() {
      if (this.isMain) {
        this.initAMap()
      }
    }
  },
  created() {
    if (this.isMain) {
      this.init()
      this.initAMap()
    }
  },
  methods: {
    tabType(index) {
      this.index = index
      switch (index) {
        case '0':
          this.initAMap()
          break
        case '1':
          setTimeout(() => {
            this.disaster()
          }, 0)
          break
        default:
          break
      }
    },
    async initAMap() {
      try {
        const self = this
        this.amap = await AMap()
        var opts = {
          subdistrict: 0,
          extensions: 'all',
          level: 'city'
        }
        var district = new self.amap.DistrictSearch(opts)
        district.search('咸阳市', function(status, result) {
          var bounds = result.districtList[0].boundaries
          var mask = []
          for (var i = 0; i < bounds.length; i += 1) {
            mask.push([bounds[i]])
          }
          self.map = new self.amap.Map('plantingMap', {
            mask: mask,
            center: [108.19848536074164, 34.241771035259845],
            disableSocket: true,
            viewMode: '3D',
            showLabel: false,
            labelzIndex: 130, // 地图标注显示顺序，大于110即可将底图上的默认标注显示在覆盖物（圆、折线、面）之上。
            pitch: 40, // 俯仰角度，默认0，[0,83]，2D地图下无效 。（自V1.4.0开始支持）
            zoom: 16,
            layers: [
              new self.amap.TileLayer.RoadNet({
                // rejectMapMask:true
              }),
              new self.amap.TileLayer.Satellite()
            ]
          })
          // 添加自定义图层
          self.map.plugin(['AMap.CustomLayer'], function() {
            var size = self.map.getSize()
            var canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
            canvas.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
            canvas.setAttribute('width', size.width)
            canvas.setAttribute('height', size.height)

            self.path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
            self.path.onclick = function() {
              // console.log('svg path clicked')
            }
            var styleText = []
            styleText.push('stroke:#132235')
            styleText.push('fill:#132235')
            styleText.push('fill-opacity:0.6')
            self.path.style.cssText = styleText.join(';')

            canvas.appendChild(self.path)
            var customLayer = new self.amap.CustomLayer(canvas, {
              // zooms: [3, 8],
              alwaysRender: true,
              zIndex: 100
            })
            customLayer.render = self.onRender
            self.map.add(customLayer)
          })

          // 添加高度面
          var object3Dlayer = new self.amap.Object3DLayer({ zIndex: 1 })
          self.map.add(object3Dlayer)
          var height = -8000
          var color = '#0088ffcc' // rgba
          var wall = new self.amap.Object3D.Wall({
            path: bounds,
            height: height,
            color: color
          })
          wall.transparent = true
          object3Dlayer.add(wall)

          // 添加描边
          for (let i = 0; i < bounds.length; i += 1) {
            new self.amap.Polyline({
              path: bounds[i],
              strokeColor: '#99ffff',
              strokeWeight: 4,
              map: self.map
            })
          }
          plantAreaCrops().then((res) => {
            self.mapData = res.body.data
            self.addPolygon(res.body.data)
          })
        })
      } catch (err) {
        console.error(err)
      }
    },
    buildPath() {
      var path = []
      var center = this.map.lngLatToContainer(this.starCenter)
      for (let k = 0; k < 6; k += 1) {
        var ag = ((Math.PI * 60) / 180) * k
        var x = center.x + Math.cos(ag) * 500000
        var y = center.y + Math.sin(ag) * 500000
        path.push((k === 0 ? 'M' : 'L') + x + ' ' + y)
      }
      return path.join(' ') + ' Z'
    },
    onRender() {
      var newPath = this.buildPath()
      this.path.setAttribute('d', newPath)
    },
    disasterBuildPath() {
      var path = []
      var center = this.disasterMap.lngLatToContainer(this.starCenter)
      for (let k = 0; k < 6; k += 1) {
        var ag = ((Math.PI * 60) / 180) * k
        var x = center.x + Math.cos(ag) * 500000
        var y = center.y + Math.sin(ag) * 500000
        path.push((k === 0 ? 'M' : 'L') + x + ' ' + y)
      }
      return path.join(' ') + ' Z'
    },
    disasterOnRender() {
      var newPath = this.disasterBuildPath()
      this.disasterPath.setAttribute('d', newPath)
    },
    disaster() {
      const self = this
      const opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
      }
      const district = new self.amap.DistrictSearch(opts)
      district.search('咸阳市', function(status, result) {
        const bounds = result.districtList[0].boundaries
        const mask = []
        for (let i = 0; i < bounds.length; i += 1) {
          mask.push([bounds[i]])
        }
        self.disasterMap = new self.amap.Map('disasterMap', {
          mask: mask,
          center: [108.19848536074164, 34.241771035259845],
          disableSocket: true,
          viewMode: '3D',
          showLabel: false,
          labelzIndex: 130, // 地图标注显示顺序，大于110即可将底图上的默认标注显示在覆盖物（圆、折线、面）之上。
          pitch: 40, // 俯仰角度，默认0，[0,83]，2D地图下无效 。（自V1.4.0开始支持）
          zoom: 16,
          layers: [
            new self.amap.TileLayer.RoadNet({
              // rejectMapMask:true
            }),
            new self.amap.TileLayer.Satellite()
          ]
        })
        // 添加自定义图层
        self.disasterMap.plugin(['AMap.CustomLayer'], function() {
          const size = self.disasterMap.getSize()
          const canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
          canvas.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
          canvas.setAttribute('width', size.width)
          canvas.setAttribute('height', size.height)

          self.disasterPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
          self.disasterPath.onclick = function() {
            //console.log('svg path clicked')
          }
          const styleText = []
          styleText.push('stroke:#132235')
          styleText.push('fill:#132235')
          styleText.push('fill-opacity:0.6')
          self.disasterPath.style.cssText = styleText.join(';')

          canvas.appendChild(self.disasterPath)
          const customLayer = new self.amap.CustomLayer(canvas, {
            // zooms: [3, 8],
            alwaysRender: true,
            zIndex: 100
          })
          customLayer.render = self.disasterOnRender
          self.disasterMap.add(customLayer)
        })

        // 添加高度面
        const object3Dlayer = new self.amap.Object3DLayer({ zIndex: 1 })
        self.disasterMap.add(object3Dlayer)
        const height = -8000
        const color = '#0088ffcc' // rgba
        const wall = new self.amap.Object3D.Wall({
          path: bounds,
          height: height,
          color: color
        })
        wall.transparent = true
        object3Dlayer.add(wall)

        // 添加描边
        for (let i = 0; i < bounds.length; i += 1) {
          new self.amap.Polyline({
            path: bounds[i],
            strokeColor: '#99ffff',
            strokeWeight: 4,
            map: self.disasterMap
          })
        }
        // self.disasterAddPolygon()
      })
      // this.disasterMap = new this.amap.Map('disasterMap', {
      //   amapizeEnable: true, // 是否监控地图容器尺寸变化
      //   zoom: 14, // 初始化地图层级
      //   mapStyle: 'amap://styles/fa9f091b73ec8e37b8b84784a4791559', // 地图样式
      //   // center: [108.096154, 34.264296] // 初始化地图中心点
      //   center: [108.096963, 34.263525] // 初始化地图中心点
      // })

      // this.disasterAddPolygon()
    },
    // 农产品种植地图
    farming() {
      this.initAMap()
      this.plantAreaCrops()
    },
    disasterArea() {
      disasterArea().then((res) => {
        this.disasterAreaData = res.body.data
      })
    },
    disasterAddPolygon() {
      const self = this
      const markers = []
      this.disasterAreaData.forEach((item, index) => {
        const b = []
        const f = JSON.parse(item.coordinate)
        f.map((ite) => {
          b.push(new this.amap.LngLat(ite.lng, ite.lat))
        })
        let color = ''
        this.colorList.map((d) => {
          if (d.type === item.type) {
            color = d.color
          }
        })
        const polygon = new this.amap.Polygon({
          title: item.name,
          data: item,
          path: b,
          strokeColor: color, // 线颜色
          strokeOpacity: 0.2, // 线透明度
          strokeWeight: 10, // 线宽
          fillColor: color, // 填充色
          fillOpacity: 0.8 // 填充透明度
        })
        polygon.on('click', function(e) {
          self.disasterOpenInfo(e, item)
        })
        markers.push(polygon)
      })
      const overlayGroups = new this.amap.OverlayGroup(markers)
      this.disasterMap.add(overlayGroups)
    },
    addPolygon(data) {
      const self = this
      const markers = []
      data.forEach((item, index) => {
        const b = []
        const f = JSON.parse(item.coordinate)
        f.map((ite) => {
          b.push(new this.amap.LngLat(ite.lng, ite.lat))
        })
        let color = ''
        this.colorList.map((d) => {
          if (d.type === item.type) {
            color = d.color
          }
        })
        const polygon = new this.amap.Polygon({
          title: item.name,
          data: item,
          path: b,
          strokeColor: color, // 线颜色
          strokeOpacity: 0.2, // 线透明度
          strokeWeight: 10, // 线宽
          fillColor: color, // 填充色
          fillOpacity: 0.8 // 填充透明度
        })
        polygon.on('click', function(e) {
          self.openInfo(e, item)
        })
        markers.push(polygon)
      })
      const overlayGroups = new this.amap.OverlayGroup(markers)
      this.map.add(overlayGroups)
    },
    openInfo(e, item) {
      const self = this
      const title = '详情'
      const content = []
      content.push('<div class="flex"><div class="w-105">名称:</div><div>' + item.typeName + '</div></div>')
      this.infoWindow = new this.amap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: createInfoWindow(title, content.join('<br/>'), self.map, 0),
        offset: new this.amap.Pixel(16, -45)
      })
      this.infoWindow.open(this.map, e.lnglat)
    },
    disasterOpenInfo(e, item) {
      const self = this
      const title = item.year
      const content = []
      content.push('<div id="mapEcharts"></div>')
      this.infoWindow = new this.amap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: self.createInfoWindow(title, content.join('<br/>')),
        offset: new this.amap.Pixel(16, -45)
      })
      this.infoWindow.open(this.disasterMap, e.lnglat)

      setTimeout(() => {
        echarts.registerTheme('themes', theme)
        var myChart = echarts.init(document.getElementById('mapEcharts'), 'themes')
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['第一产业GDP', '第二产业GDP', '第三产业GDP']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['30%', '45%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '16',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 30, name: '第一产业GDP' },
                { value: 30, name: '第二产业GDP' },
                { value: 30, name: '第三产业GDP' }
              ]
            }
          ]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      }, 100)
    },
    plantAreaCrops(item) {
      this.p2 = new Promise((resolve, reject) => {
        plantAreaCrops().then((res) => {
          resolve(res.body.data)
        })
      })
    },
    init() {
      getTowSideStatMonth({
        groupCode: 'NCPGXSPFX',
        dateType: 'month'
      }).then((res) => {
        this.optionNCPGXSPFX.xAxis.data = res.body.dateSet
        const data = res.body
        this.optionNCPGXSPFX.legend.data = data.typeSet
        this.optionNCPGXSPFX.series = data.typeSet.map((item, index) => {
          return {
            name: item,
            data: data.typeValueListMap[item],
            type: 'line',
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            }
          }
        })
      })
      // 农资概况
      getTowSideStat({ groupCode: 'NZGK' }).then((data) => {
        const val = data.body
        const optionNZGK = this.optionNZGK
        optionNZGK.xAxis.data = val.dateSet
        optionNZGK.legend.data = val.typeSet
        const arr = Object.keys(val.typeValueListMap)
        arr.forEach((item, index) => {
          if (index + 1 === arr.length) {
            optionNZGK.series.push({
              name: item,
              type: 'line',
              areaStyle: {},
              yAxisIndex: 1,
              data: val.typeValueListMap[item]
            })
          } else {
            optionNZGK.series.push({
              name: item,
              type: 'bar',
              barMaxWidth: 20,
              data: val.typeValueListMap[item]
            })
          }
        })
        optionNZGK.isShow = true
      })
      // true
      getTowSideStat({ groupCode: 'XXJYZTJYQK' }).then((data) => {
        const val = data.body
        const optionXjyzt = this.optionXjyzt
        optionXjyzt.xAxis.data = val.dateSet
        optionXjyzt.legend.data = val.typeSet
        const arr = Object.keys(val.typeValueListMap)
        arr.forEach((item, index) => {
          if (index + 1 === arr.length) {
            optionXjyzt.series.push({
              name: item,
              type: 'line',
              areaStyle: {},
              data: val.typeValueListMap[item]
            })
          } else {
            optionXjyzt.series.push({
              name: item,
              type: 'bar',
              barMaxWidth: 20,
              yAxisIndex: 1,
              data: val.typeValueListMap[item]
            })
          }
        })
        optionXjyzt.isShow = true
      })
      // true
      getTowSideStat({ groupCode: 'NYPX' }).then((data) => {
        const val = data.body
        const optionNypx_1 = this.optionNypx_1
        optionNypx_1.xAxis.data = val.dateSet
        optionNypx_1.legend.data = val.typeSet
        const arr = Object.keys(val.typeValueListMap)
        arr.forEach((item, index) => {
          optionNypx_1.series.push({
            name: item,
            type: 'line',
            areaStyle: {},
            data: val.typeValueListMap[item],
            yAxisIndex: index
          })
        })
        optionNypx_1.isShow = true
      })
      getTowSideBalanceStat({ groupCode: 'NCPGX' }).then((data) => {
        const val = data.body
        const option = this.optionNcpgx
        option.legend.data = val.typeSet
        option.yAxis[0].data = val.dateSet
        Object.keys(val.typeValueListMap).forEach((key, index) => {
          option.series[index].name = key
          option.series[index].data = val.typeValueListMap[key]
        })
        option.isShow = true
      })
      // true
      populationDivide({ groupCode: 'NYSCGDP' }).then((data) => {
        this.populationDivide = data.body
        // console.log('农村产业GDP', this.populationDivide)
      })
      // true
      getTowSideStat({ groupCode: 'CCWLGK' }).then((data) => {
        const val = data.body
        const optionCcwlgk = this.optionCcwlgk
        optionCcwlgk.xAxis.data = val.dateSet
        optionCcwlgk.legend.data = val.typeSet
        const arr = Object.keys(val.typeValueListMap)
        arr.forEach((item, index) => {
          optionCcwlgk.series.push({
            name: item,
            type: 'line',
            areaStyle: {},
            data: val.typeValueListMap[item]
          })
        })
        optionCcwlgk.isShow = true
      })

      // queryMergeList({ groupCode: 'CCWLGK' }).then((data) => {
      //   this.tableData = data.body.data
      //   this.tableData.length = 4
      // })
      this.disasterArea()
    }
  }
}
</script>
<style scoped>
.second-center {
  width: 66.06%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 32.5%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-center[data-top] {
  background: url(/static/img/gradients-left.ed6fe225.png) no-repeat;
  background-size: 100% 100% !important;
}
.second-center[data-bottom] {
  background: url(/static/img/gradients-left.ed6fe225.png) no-repeat;
  background-size: 100% 100% !important;
}
.second-sides[data-top] {
  background: url(/static/img/gradients-left.ed6fe225.png) no-repeat;
  background-size: 100% 100% !important;
}
.second-sides[data-bottom] {
  background: url(/static/img/gradients-left.ed6fe225.png) no-repeat;
  background-size: 100% 100% !important;
}
.nine-h {
  div:nth-child(1) {
    height: 30%;
  }
}
.big-number {
  font-size: 44px;
  font-family: DIN;
  font-weight: bold;
  color: rgba(36, 246, 177, 1);
  line-height: 51px;
  background: linear-gradient(180deg, rgba(0, 255, 190, 1) 0%, rgba(0, 182, 255, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.small-number {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(188, 221, 242, 1);
}
.t-big-number {
  font-size: 28px;
  font-family: Myfont;
  font-weight: bold;
  text-shadow: 0px 1px 12px rgba(6, 80, 184, 0.41);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(60, 181, 255, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
div[data-33] {
  width: 33%;
}
.map-box {
  position: relative;
}

.map-type {
  position: absolute;
  top: 15%;
  right: 30%;
  z-index: 1000;
}
.item-map-type {
  cursor: pointer;
  width: 120px;
  height: 36px;
  background: rgba(36, 193, 247, 0.08);
  border: 1px solid rgba(26, 116, 207, 1);
  color: #ffffff;
  text-align: center;
  line-height: 36px;
  margin-bottom: 16px;
  font-size: 14px;
}
.active {
  background: #24c1f7;
}

div[data-bottom] {
  background: url(~@/assets/img/gradients-left.png) no-repeat;
  background-size: 100% 100% !important;
}
.gradients-right {
  right: 0;
  height: 100%;
  z-index: 2;
  width: 36%;
  background: url(~@/assets/img/bg-img.png) no-repeat;
  background-size: auto 100%;
  background-position: 100% 10.2%;
}
.gradients-left {
  height: 100%;
  z-index: 2;
  width: 36%;
  background: url(~@/assets/img/bg-img.png) no-repeat;
  background-size: auto 100%;
  background-position: 0 10.2%;
}
.gradients-bottom {
  z-index: 2;
  width: 28%;
  position: absolute;
  bottom: 0;
  left: 36%;
  height: 30%;
  background: url(~@/assets/img/bg-img.png) no-repeat;
  background-position: 50% 102%;
}

.map-legend {
  padding: 12px 18px;
  position: fixed;
  left: 27.5%;
  bottom: 2%;
  z-index: 1000;
  color: #fff;
  background: rgba(18, 33, 53, 0.8);
  border-radius: 4px;
}
.map-legend-color {
  width: 40px;
  height: 18px;
  margin-right: 10px;
}
.map-legend-item {
  margin-bottom: 8px;
}
.map-legend-item:last-child {
  margin-bottom: 0;
}

.small-number {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(188, 221, 242, 1);
  margin-left: 6px;
}
.number-box {
  display: flex;
  align-items: center;
}
.m-t-25 {
  margin-top: 25px;
}
</style>
